﻿@using System.Net.Http.Json
@using MudBlazor.Examples.Data.Models
@namespace MudBlazor.Docs.Examples
@inject HttpClient httpClient

<style>
    .mud-table-cell-custom-group {
        font-weight: 500;
    }

    .mud-table-cell-custom-group-footer {
        padding-bottom: 50px;
        text-align: right;
    }
</style>

<MudTable Hover="true" Breakpoint="Breakpoint.Sm" Height="500px" FixedHeader="true"
          Items="@Elements"
          GroupBy="@_groupDefinition"
          GroupHeaderStyle="background-color:var(--mud-palette-background-grey)"
          GroupFooterClass="mb-4"
          Dense="_dense"
          MultiSelection="_multiSelect">
    <HeaderContent>
        <MudTh>Nr</MudTh>
        <MudTh>Sign</MudTh>
        <MudTh>Name</MudTh>
        <MudTh>Group</MudTh>
        <MudTh>Position</MudTh>
        <MudTh>Molar mass</MudTh>
    </HeaderContent>
    <GroupHeaderTemplate>
        <MudTh Class="mud-table-cell-custom-group" colspan="6">@($"{context.GroupName}: {context.Key}")</MudTh>
    </GroupHeaderTemplate>
    <RowTemplate>
        <MudTd DataLabel="Nr">@context.Number</MudTd>
        <MudTd DataLabel="Sign">@context.Sign</MudTd>
        <MudTd DataLabel="Name">@context.Name</MudTd>
        <MudTd DataLabel="Group">@context.Group</MudTd>
        <MudTd DataLabel="Position">@context.Position</MudTd>
        <MudTd Style="text-align:right" DataLabel="Molar mass">@context.Molar</MudTd>
    </RowTemplate>
    <GroupFooterTemplate>
        <MudTh Class="mud-table-cell-custom-group mud-table-cell-custom-group-footer" colspan="6">Total Mass: @context.Items.Sum((e) => e.Molar)</MudTh>
    </GroupFooterTemplate>
</MudTable>
<MudSwitch @bind-Checked="_dense" Color="Color.Primary">Dense</MudSwitch>
<MudSwitch @bind-Checked="_multiSelect" Color="Color.Primary">MultiSelect</MudSwitch>
<MudSwitch @bind-Checked="_groupDefinition.Indentation" Color="Color.Primary">Indentation</MudSwitch>
<MudSwitch @bind-Checked="_groupDefinition.Expandable" Color="Color.Primary">Expandable (Root Level)</MudSwitch>
<MudSwitch @bind-Checked="_groupDefinition.InnerGroup.Expandable" Color="Color.Primary">Expandable (Second Level)</MudSwitch>

@code {
    private bool _dense = false;
    private bool _multiSelect = true;

    private TableGroupDefinition<Element> _groupDefinition = new TableGroupDefinition<Element>()
    {
        GroupName = "Group",
        Indentation = false,
        Expandable = false,
        Selector = (e) => e.Group,
        InnerGroup = new TableGroupDefinition<Element>()
        {
            GroupName = "Position",
            Expandable = false,
            Selector = (e) => e.Position
        }

    };


    private IEnumerable<Element> Elements = new List<Element>();

    protected override async Task OnInitializedAsync()
    {
        Elements = await httpClient.GetFromJsonAsync<List<Element>>("webapi/periodictable");
    }

}
